<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" class="u-m-b-12" :fixed="false" title="地址管理" placeholder bgColor="#fff"></u-navbar>
    <u-radio-group
      v-model="defaultAddr"
      @change="onChange"
      placement="column"
      activeColor="#56CB03"
      size="32rpx"
      v-if="list.length"
    >
      <u-swipe-action>
        <view class="address-item" v-for="(item, index) in list" :key="item.id" @click="checkAddr(item)">
          <u-swipe-action-item @click="del(item)" :options="actionOptions" :index="index" :threshold="100">
            <view class="address-content">
              <view class="u-p-b-22 u-m-b-12" style="border-bottom: 2rpx solid #E1E1E1;">
                <view class="u-flex u-row-between u-m-b-6">
                  <view class="u-font-24" style="color: #818181;">{{ item.province }} {{ item.city }} {{ item.district }}</view>
                  <view class="u-flex u-font-24" @click.stop="jumpTo('/pages/myAddress/edit?id='+item.id)">
                    <image style="width: 24rpx;height: 24rpx;flex-shrink: 0;" src="../../static/my/edit.png" />
                    <text class="u-m-l-6">编辑</text>
                  </view>
                </view>
                <view class="u-font-28 u-m-b-6" style="font-weight: 500;">{{ item.adsDetail }}</view>
                <view class="u-flex">
                  <text class="u-font-24 u-m-r-28" style="color: #333333;">{{ item.receiverName }} {{ item.receiverPhone }}</text>
                  <view class="default-icon" v-if="item.isDefault=='1'">默认</view>
                </view>
              </view>
              <u-radio :name="item.id" iconSize="24rpx"><text class="u-font-24">{{defaultAddr==item.id?'默认':'设为默认'}}</text></u-radio>
            </view>
          </u-swipe-action-item>
        </view>
      </u-swipe-action>
    </u-radio-group>
    <a-empty v-else></a-empty>
    <view class="btn" @click="jumpTo('/pages/myAddress/edit')">
      <image style="width: 28rpx;height: 28rpx;" src="../../static/my/add.png" />
      <text>新建地址</text>
    </view>
  </view>
</template>

<script>
import { getAddressesList, setDefaultAddr, delAddresses } from '@/api/index'

export default {
  data() {
    return {
      list: [],
      defaultAddr: '',
      actionOptions: [
      {
        text: '删除',
        style: {
          backgroundColor: '#E30000'
        }
      }],
    };
  },
  onShow() {
    this.getPage()
  },
  methods: {
    del(item) {
      const that = this
      uni.showModal({
        title: '提示',
        content: '确定取删除此地址?',
        showCancel: true,
        success: ({ confirm, cancel }) => {
          if(confirm) {
            delAddresses({id: item.id}).then(res => {
              uni.showToast({
                icon: 'none',
                title: '删除成功'
              })
              that.getPage()
            })
          }
        }
      })
    },
    getPage() {
      uni.showLoading({ mask: true })
      getAddressesList({pageNum: 100}).then(res => {
        uni.hideLoading()
        this.list = res.rows
        this.defaultAddr = (this.list.find(v => v.isDefault == '1')||{}).id || ''
      })
    },
    onChange(id) {
      uni.showLoading({ mask: true })
      setDefaultAddr({id}).then(res => {
        uni.hideLoading()
        uni.showToast({
          icon: 'none',
          title: '切换成功'
        })
        this.getPage()
      })
    },
    checkAddr(item) {
      uni.setStorageSync('addressInfo', item)
      this.goBack()
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .address-item {
    width: 702rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    margin: 16rpx auto;
    .address-content {
      padding: 14rpx 26rpx;
      .default-icon {
        width: 80rpx;
        height: 32rpx;
        line-height: 32rpx;
        text-align: center;
        background: #56CB03;
        border-radius: 200rpx;
        font-size: 20rpx;
        color: #FFFFFF;
      }
    }
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6rpx;
    width: 360rpx;
    height: 80rpx;
    background: #FFFFFF;
    border-radius: 200rpx;
    border: 2rpx solid #56CB03;
    font-size: 28rpx;
    color: #56CB03;
    margin: 42rpx auto 0;
  }
}
</style>
